---
title: Sliding Number
description: A sliding number animation.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="demo-primitives-texts-sliding-number" />

## Installation

<ComponentInstallation name="primitives-texts-sliding-number" />

## Usage

```tsx
<SlidingNumber number={100} />
```

## API Reference

### SlidingNumber

<TypeTable
  type={{
    number: {
      description: 'The number to slide.',
      type: 'number',
      required: true,
    },
    fromNumber: {
      description: 'The number to start counting from.',
      type: 'number',
      required: false,
    },
    padStart: {
      description: 'Whether to pad the number with leading zeros.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    decimalSeparator: {
      description: 'The separator for the decimal part.',
      type: 'string',
      required: false,
      default: '.',
    },
    decimalPlaces: {
      description: 'The number of decimal places to show.',
      type: 'number',
      required: false,
      default: '0',
    },
    thousandSeparator: {
      description: 'The separator for the thousand part.',
      type: 'string',
      required: false,
    },
    transition: {
      description: 'The transition to use.',
      type: 'SpringOptions',
      required: false,
      default: '{ stiffness: 200, damping: 20, mass: 0.4 }',
    },
    delay: {
      description: 'The delay to use.',
      type: 'number',
      required: false,
      default: '0',
    },
    initiallyStable: {
      description:
        'Whether the number should be initially stable. This is useful if you have a lot of animated elements, to prevent this from causing problems during the first rendering.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inView: {
      description: 'Whether the number is in view.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inViewMargin: {
      description: 'The margin of the in view area.',
      type: 'string',
      required: false,
      default: '0px',
    },
    inViewOnce: {
      description: 'Whether the number should be in view only once.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    '...props': {
      description: 'The props of the sliding number.',
      type: 'HTMLMotionProps<"span">',
      required: false,
    },
  }}
/>
